<template>
  <div id="content">
    <view-box>

      <x-header slot="header" :right-options="{showMore: true}" @on-click-more="showMenus = true">投票详情</x-header>

      <div style="padding-top:56px;">
        <card class="vote-item-card">
          <div slot="content" class="card-padding">
            <vote-flag :deadline="currentVote.deadline" />
            <avatar :account="currentVote.creatorAccount" :username="currentVote.creatorUsername" :datetime="currentVote.updatedAt" />
            <p class="vote-topic">{{currentVote.topic}}</p>
          </div>
        </card>
        <checklist :disabled="new Date()>=new Date(currentVote.deadline)" :title="currentVote.type=='single'?'单选':'多选'" :max="currentVote.type=='single'?1:currentVote.options.length" label-position="left" required :options="currentVote.options" v-model="checklist"></checklist>
        <!-- <div v-if="this.deleteVoteButtonDisabled"></div> -->
        <group class="deadline" :title="currentVote.deadline | deadlineFormat" />

        <div class="submit-btn" v-if="new Date()<new Date(currentVote.deadline)">
          <x-button type="primary" @click.native="onSubmit()">投 票</x-button>
        </div>

      </div>

    </view-box>

    <div v-transfer-dom>
      <actionsheet :menus="menus" v-model="showMenus" @on-click-menu="onClickMenu" show-cancel></actionsheet>
    </div>

  </div>
</template>

<style lang="less">
#content {
  height: 100%;
  background-color: #fbf9fe;
  .vux-header {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000;
  }
  .vote-item-card {
    padding: 1rem;
    .vote-topic {
      margin-top: 0.5rem;
    }
  }
  .check-option-item {
    font-size: 0;
    -webkit-text-size-adjust: none;
    span {
      font-size: 1rem;
      color: @cell-placeholder-color;
    }
    .check-option-item-icon {
      margin-right: 0.75rem;
      fill: @theme-color;
    }
  }
  .deadline {
    margin-bottom: 4rem;
  }
  .submit-btn {
    padding: 0.5rem 1rem;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1000;
    background-color: #f8f8f8;
  }
}
</style>

<script>
import {
  XHeader,
  ViewBox,
  Card,
  Group,
  Cell,
  CellBox,
  CheckIcon,
  XButton,
  Tabbar,
  TabbarItem,
  Flexbox,
  FlexboxItem,
  Checklist,
  dateFormat,
  Actionsheet,
  ButtonTab,
  ButtonTabItem,
  TransferDom
} from "vux";
import Avatar from "../components/Avatar";
import VoteFlag from "../components/VoteFlag";
import { mapActions, mapState, mapGetters } from "vuex";

export default {
  name: "Content",
  props: ["voteId"],
  directives: {
    TransferDom
  },
  components: {
    XHeader,
    ViewBox,
    Card,
    Group,
    Cell,
    CellBox,
    CheckIcon,
    XButton,
    Tabbar,
    TabbarItem,
    Flexbox,
    FlexboxItem,
    Avatar,
    VoteFlag,
    Checklist,
    Actionsheet,
    ButtonTab,
    ButtonTabItem
  },
  data() {
    return {
      checklist: [],
      menus: {
        menu1: { op: "result", label: "查看结果" },
        menu2: {
          op: "delete",
          label:
            '删除投票<br/><span style="color:#666;font-size:12px;">删除后将无法撤销</span>',
          type: "disabled"
        }
      },
      showMenus: false
    };
  },
  created() {
    this.menus.menu2.type = this.deleteVoteButtonDisabled ? "disabled" : "warn";
    this.reqGetVoteDetailById({
      _id: this.voteId
    });
  },
  filters: {
    deadlineFormat: datetime =>
      `截止时间：${dateFormat(new Date(datetime), "YYYY-MM-DD HH:mm:ss")}`
  },
  computed: {
    ...mapState({
      // 映射 this.count 为 store.state.msg.count
      currentVote: state => state.vote.currentVote
    }),
    ...mapGetters([
      "deleteVoteButtonDisabled"
      // ...
    ])
  },
  methods: {
    ...mapActions([
      "reqGetVoteDetailById",
      "reqCreateVoteResult",
      "reqDeleteVoteById"
    ]),
    onSubmit() {
      console.log(this.voteId);
      let payload = {
        selected: this.checklist,
        id: this.voteId
      };
      console.log(payload);
      this.reqCreateVoteResult(payload);
    },
    onClickMenu(menuKey, menuItem) {
      if (menuItem) {
        switch (menuItem.op) {
          case "result": //查看结果
            this.$router.push({
              name: "Result",
              params: { voteId: this.voteId }
            });
            break;
          case "delete": //删除投票
            this.reqDeleteVoteById({
              _id: this.voteId
            });
            break;
        }
      }
    }
  }
};
</script>

